<template>
  <div>
    <header-nav signinUp="home">
      <h1 slot="logo" class="logo"><img class="logo_image" :src="imgBaseUrl + '/GDR2016/GDR477/MOBILE/M_Ten_Years_Logo_11.png'" draggable="true" data-bukket-ext-bukket-draggable="true"></h1>
    </header-nav>
    <nav class="category-nav">
      <swiper :options="swiperOption" ref="mySwiper">
        <!-- slides -->
        <swiper-slide v-for="(item,index) in banners" :key="index" class="banner_container">
          <a :href="item.banner_link">
            <img :src="item.banner_url">
          </a>
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
    </nav>
    <section class="top-brand">
      <ul class="top-brand-list" v-if="brandTypes.length">
        <li v-for="(brand, index) in brandTypes" :key="index" v-if="index > 3">
          <router-link :to="{path: '/categories', query:{brand_id: brand.brand_id, brand_name: brand.brand_name}}">
            <img :src="brand.brand_image" :alt="brand.brand_name">
          </router-link>
        </li>
      </ul>
      <div  v-else>

        <img src="../../assets/fl.svg" class="fl_back animation_opactiy">
        <transition name="loading">
          <loading></loading>
        </transition>
      </div>
    </section>
    <div class="grid_container">
      <grid-list></grid-list>
    </div>
    <footer-nav></footer-nav>
  </div>
</template>

<script>
  import HeaderNav from '../../components/HeaderNav.vue'
  import FooterNav from '../../components/FooterNav.vue'
  import GridList from '../../components/Gird.vue'
  import Loading from '../../components/Loading.vue'
  import { imgBaseUrl } from '../../config/env'
  import { banners, categories, product } from '../../service/getData'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'
  export default {
    components: {
      HeaderNav,
      FooterNav,
      GridList,
      Loading,
      swiper,
      swiperSlide
    },
    data() {
      return {
        banners: [],
        brandTypes: [],
        imgBaseUrl,
        swiperOption: {
          notNextTick: true,
          autoplay: 5000,
          effect:"coverflow",
          grabCursor : true,
          setWrapperSize :true,
          autoHeight: true,
          pagination : '.swiper-pagination',
          paginationClickable :true,
        }
      }
    },
    mounted() {
      this.initData()
    },
    methods: {
      async initData() {
        await banners().then(res => {
          this.banners = res.data
        })
        await categories('brand').then(res => {
          this.brandTypes = res.data
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../style/mixin";
  .category-nav {
    padding-top: 2rem;
    background-color: #fff;
  }
  .banner_container{
    display:flex;
    flex-wrap: wrap;
    height: 9rem;
    a {
      display: block;
      width: 100%;
    }
    img{
      width: 100%;
    }

  }
  .top-brand-list {
    @include fj;
    width: 98%;
    margin: 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    li {
      padding: 0.4rem 0 0;
      img {
        background-color: #fff;
      }
    }
  }
  .grid_container{
    padding: 0.5rem 0;
    background-color: #fff;
  }
</style>
